<!DOCTYPE html>
<html>

<head>
    <title>树控件</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--插件  -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!--插件——动画  -->
    <link rel="stylesheet" href="css/animate.css">

    <!--插件——字体库  -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!--插件——树  -->
    <link rel="stylesheet" href="css/plugins/jsTree/style.min.css">

    <!--自定义  -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <ol class="breadcrumb">
        <li>表单控件</li>
        <li class="active">树控件</li>
    </ol>
    <div class="content">
        <div class="row">
            <div class="col-sm-6">
                <h3>jsTree</h3>
                <div id="jstree1">
                    <ul>
                        <li class="jstree-open">
                            <ul>
                                <li>css
                                    <ul>
                                        <li data-jstree='{"type":"css"}'>animate.css</li>
                                        <li data-jstree='{"type":"css"}'>bootstrap.css</li>
                                        <li data-jstree='{"type":"css"}'>style.css</li>
                                    </ul>
                                </li>
                                <li>email-templates
                                    <ul>
                                        <li data-jstree='{"type":"html"}'>action.html</li>
                                        <li data-jstree='{"type":"html"}'>alert.html</li>
                                        <li data-jstree='{"type":"html"}'>billing.html</li>
                                    </ul>
                                </li>
                                <li>fonts
                                    <ul>
                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.eot</li>
                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.svg</li>
                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.ttf</li>
                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.woff</li>
                                    </ul>
                                </li>
                                <li class="jstree-open">img
                                    <ul>
                                        <li data-jstree='{"type":"img"}'>profile_small.jpg</li>
                                        <li data-jstree='{"type":"img"}'>angular_logo.png</li>
                                        <li class="text-navy" data-jstree='{"type":"img"}'>html_logo.png</li>
                                        <li class="text-navy" data-jstree='{"type":"img"}'>mvc_logo.png</li>
                                    </ul>
                                </li>
                                <li class="jstree-open">js
                                    <ul>
                                        <li data-jstree='{"type":"js"}'>hplus.js</li>
                                        <li data-jstree='{"type":"js"}'>bootstrap.js</li>
                                        <li data-jstree='{"type":"js"}'>jquery-2.1.1.js</li>
                                        <li data-jstree='{"type":"js"}'>jquery-ui.custom.min.js</li>
                                        <li class="text-navy" data-jstree='{"type":"js"}'>jquery-ui-1.10.4.min.js</li>
                                    </ul>
                                </li>
                                <li data-jstree='{"type":"html"}'>affix.html</li>
                                <li data-jstree='{"type":"html"}'>dashboard.html</li>
                                <li data-jstree='{"type":"html"}'>buttons.html</li>
                                <li data-jstree='{"type":"html"}'>calendar.html</li>
                                <li data-jstree='{"type":"html"}'>contacts.html</li>
                                <li data-jstree='{"type":"html"}'>css_animation.html</li>
                                <li class="text-navy" data-jstree='{"type":"html"}'>flot_chart.html</li>
                                <li class="text-navy" data-jstree='{"type":"html"}'>google_maps.html</li>
                                <li data-jstree='{"type":"html"}'>icons.html</li>
                                <li data-jstree='{"type":"html"}'>inboice.html</li>
                                <li data-jstree='{"type":"html"}'>login.html</li>
                                <li data-jstree='{"type":"html"}'>mailbox.html</li>
                                <li data-jstree='{"type":"html"}'>profile.html</li>
                                <li class="text-navy" data-jstree='{"type":"html"}'>register.html</li>
                                <li data-jstree='{"type":"html"}'>timeline.html</li>
                                <li data-jstree='{"type":"html"}'>video.html</li>
                                <li data-jstree='{"type":"html"}'>widgets.html</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-6">
                <h3>jsTree JSON</h3>
                <div id="using_json"></div>
            </div>
        </div>
    </div>

    <!--插件-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!--插件——时间  -->
    <script src="js/plugins/jsTree/jstree.js"></script>

    <!--自定义JS  -->
    <script src="js/loading.js"></script>

    <script>
        $(function() {
            $('#jstree1').jstree({
                'core': {
                    'check_callback': true
                },
                'plugins': ['types', 'dnd'],
                'types': {
                    'default': {
                        'icon': 'fa fa-folder'
                    },
                    'html': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'svg': {
                        'icon': 'fa fa-file-picture-o'
                    },
                    'css': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'img': {
                        'icon': 'fa fa-file-image-o'
                    },
                    'js': {
                        'icon': 'fa fa-file-text-o'
                    }

                }
            });
            $('#using_json').jstree({
                'core': {
                    'data': [
                        'Empty Folder', {
                            'text': 'Resources',
                            'state': {
                                'opened': true
                            },
                            'children': [{
                                'text': 'css',
                                'children': [{
                                    'text': 'animate.css',
                                    'icon': 'none'
                                }, {
                                    'text': 'bootstrap.css',
                                    'icon': 'none'
                                }, {
                                    'text': 'main.css',
                                    'icon': 'none'
                                }, {
                                    'text': 'style.css',
                                    'icon': 'none'
                                }],
                                'state': {
                                    'opened': true
                                }
                            }, {
                                'text': 'js',
                                'children': [{
                                    'text': 'bootstrap.js',
                                    'icon': 'none'
                                }, {
                                    'text': 'hplus.min.js',
                                    'icon': 'none'
                                }, {
                                    'text': 'jquery.min.js',
                                    'icon': 'none'
                                }, {
                                    'text': 'jsTree.min.js',
                                    'icon': 'none'
                                }, {
                                    'text': 'custom.min.js',
                                    'icon': 'none'
                                }],
                                'state': {
                                    'opened': true
                                }
                            }, {
                                'text': 'html',
                                'children': [{
                                    'text': 'layout.html',
                                    'icon': 'none'
                                }, {
                                    'text': 'navigation.html',
                                    'icon': 'none'
                                }, {
                                    'text': 'navbar.html',
                                    'icon': 'none'
                                }, {
                                    'text': 'footer.html',
                                    'icon': 'none'
                                }, {
                                    'text': 'sidebar.html',
                                    'icon': 'none'
                                }],
                                'state': {
                                    'opened': true
                                }
                            }]
                        },
                        'Fonts',
                        'Images',
                        'Scripts',
                        'Templates',
                    ]
                }
            });
        });
    </script>
</body>

</html>